<template>
  <div
    v-infinite-scroll="getMore"
    class="main"
    :infinite-scroll-disabled="disabledScroll"
    :infinite-scroll-immediate="false"
  >
    <el-backtop target=".main"></el-backtop>
    <Header />
    <el-container class="border--radius">
      <el-header class="search" style="height: 80px;">
        <el-input v-model="search" placeholder="请输入内容"></el-input>
        <el-button
          type="primary"
          class="searchButton"
          icon="el-icon-search"
          @click="handleSearch"
          >搜索</el-button
        >
      </el-header>
      <el-main class="result">
        <el-row v-if="search !== ''" class="resultNum"
          >《{{ searchOrigin }}》在信息青年中结果共{{ len }}条</el-row
        >
        <el-row class="sort">
          <el-col :span="2">
            排序方式
          </el-col>
          <el-col :span="1">
            <el-divider direction="vertical"></el-divider
          ></el-col>
          <el-col v-for="(item, index) in sortList" :key="index" :span="2">
            <el-link
              :class="sortActive === index ? 'active' : ''"
              :underline="false"
              @click.stop.prevent="sort(item.method)"
              >{{ item.title }}</el-link
            >
          </el-col>
        </el-row>
        <NewsList :list="list" />
      </el-main>
    </el-container>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/public/header/index'
import Footer from '@/components/public/footer/index'
import NewsList from '@/components/public/newsList'
const limit = 10
export default {
  layout: 'blank',
  components: { Header, Footer, NewsList },
  data() {
    return {
      len: 10,
      page: 1,
      sortActive: 0,
      searchOrigin: '',
      sortList: [
        { title: '时间', method: 'time' },
        { title: '浏览数', method: 'browse' },
        { title: '评论数', method: 'comments' }
      ],
      disabledScroll: false
    }
  },
  async asyncData({ route, app }) {
    const search = route.params.searchKey
    const searchOrigin = search
    let list = []
    const { status, data } = await app.$axios.get('/public/search', {
      params: {
        op: 0,
        search,
        limit,
        page: 1
      }
    })
    if (status === 200) {
      if (data.code === 1) {
        list = data.data
      }
    }
    return { search, searchOrigin, list }
  },
  methods: {
    async getMore() {
      const { status, data } = await this.$axios.get('/public/search', {
        params: {
          limit,
          page: ++this.page,
          op: this.sortActive,
          search: this.search
        }
      })
      if (status === 200) {
        if (data.code === 1) {
          this.list.push(...data.data)
        } else if (data.code === -1) {
          this.$message({
            message: data.msg,
            type: 'error'
          })
          this.disabledScroll = true
          this.page--
        }
      }
    },
    handleSearch() {
      this.searchOrigin = this.search
      this.getList(1, 10)
    },
    async getList() {
      const { status, data } = await this.$axios.get('/public/search', {
        params: {
          op: this.sortActive,
          search: this.search,
          limit,
          page: ++this.page
        }
      })
      if (status === 200 && data.code === 1) {
        this.len = data.len
        this.list = data.data
      }
    },
    sort(method) {
      const active = this.sortActive
      switch (method) {
        case 'time':
          if (active !== 0) {
            this.sortActive = 0
            this.getList(1, 10)
          }
          break
        case 'browse':
          if (active !== 1) {
            this.sortActive = 1
            this.getList(1, 10)
          }
          break
        case 'comments':
          if (active !== 2) {
            this.sortActive = 2
            this.getList(1, 10)
          }
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}
.el-container {
  margin: 10px auto;
  width: $--typeArea;
  overflow: hidden;
  background: #fff;
}
.search {
  margin: 0 auto;
  width: 600px;
  .searchButton {
    padding: 0px 10px;
    border-radius: 0px 4px 4px 0px;
    height: 50%;
    font-size: 16px;
  }
  /deep/ .el-input {
    height: 100%;
    @include flexCenter;
  }
  /deep/ input {
    height: 50%;
    border-radius: 4px 0px 0px 4px;
  }
  /deep/ .el-input__prefix {
    top: 3px;
  }
  @include flexCenter;
}
.classlist {
  width: 100%;
  background: #fff;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  & li {
    height: 160px;
    width: 100%;
  }
}
.el-divider {
  margin: 0;
}
.result {
  margin: 0 auto;
  width: $--typeArea;
  background: #fff;
}
.resultNum {
  @include font(25px, 700, $--color-primary);
}
.sort {
  $--h: 50px;
  border-bottom: 1px solid #ccc;
  height: $--h;
  width: 100%;
  .el-col {
    position: relative;
    height: 100%;
    font-size: 16px;
    text-align: center;
    line-height: $--h;
    .active {
      color: $--color-primary;
    }
  }
}
</style>
